<template>
<div class="container__">
    <div class="bg">
        <div class="haohuai">
            <van-radio-group custom-class="radios" :value="radio" @change="Change">
                <van-radio name="1">
                    好评
                </van-radio>
                <van-radio name="2">差评</van-radio>
            </van-radio-group>
        </div>
    </div>
    <div class="maishu">
        <h3>如果你觉得Ta做的好就为Ta打勾吧！</h3>
        <van-checkbox-group :value="result" @change="changesle">
            <van-cell :title="item.name " clickable v-for="(item, index) in tagslist" :key="index" @click="slect(item)">
                <van-checkbox :name="item.id" use-icon-slot>
                    <image class="checksmg" slot="icon" :src="item.istrue?'/static/images/13.3.png':'/static/images/13.png'" alt="" />
                </van-checkbox>
            </van-cell>
        </van-checkbox-group>
    </div>
    <div class="xiepinjia">
        <van-field :value="pinjia" type="textarea" placeholder="写评价" :border=" false " @change="changevalue" />
    </div>
    <div class="button" @click="submit">发表</div>
</div>
</template>

<script>
import {
    orderpingjia
} from '@/api/my'
import {
    orderpingjia1
} from '@/api/my'

import {
    tags
} from '@/api/my'
export default {
    data() {
        return {
            result: [],
            pinjia: '',
            radio: '1',
            checked: true,
            radiolist: [{
                name: "好评",
                id: 1,
                flag: false,
                icon: {
                    a: '/static/images/11.png',
                    b: '/static/images/11.1.png'
                }
            }, {
                name: "差评",
                flag: false,
                id: 2,
                icon: {
                    a: '/static/images/12.png',
                    b: '/static/images/12.2.png'
                }
            }],
            addform: {
                id: '',
                type: 1,
                content: '',
                tags_ids: '',
            },
            tagslist: [],
        }
    },
    methods: {
        changesle(e) {
            console.log(e)
            this.result = e.mp.detail
            this.addform.tags_ids = e.mp.detail
        },
        changevalue(e) {
            this.addform.con = e.mp.detail
        },
        Change(e) {
            this.radio = e.mp.detail
            this.addform.type = e.mp.detail
            // console.log(this.addform.type)
        },
        dianji(item) {
            if (!item.flag) return item.flag = true
            item.flag = false
        },
        submit() {
            orderpingjia1(this.addform).then(res => {
                if(res.code==200){
                    wx.navigateBack({
                        delta: 1
                    });
                      
                }
            })
        },
        getlist() {
            orderpingjia({
                id: this.$mp.query.id
            }).then(res => {
                let newlist = res.data.tags.map(({
                    name,
                    id
                }) => ({
                    name: name,
                    id: id,
                    istrue: false
                }))
                this.tagslist = newlist              
            })
        },
        slect(item) {
            item.istrue = !item.istrue
            let tagsArray=this.tagslist.filter(function (v) {
                if (v.istrue) return true;
                }).map(function (v) {
                return v.name;
            });
            this.addform.tags=tagsArray
            // console.log(tagsArray)
        }
    },
    onLoad() {
        this.addform.id = this.$mp.query.id
        this.getlist()
    },
    onUnload(){
        this.addform.tags_id=[]
        this.result=[]
        this.addform.content=''
    }
}
</script>

<style lang="scss">
.container__ {
    min-height: 100vh;
    background-color: #F4F5F5;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    padding: 0 0 30px 0;

    .checksridai {
        width: 23px;
        height: 21px;
    }

    .checksmg {
        width: 19px;
        height: 14px;
    }

    .xiepinjia {
        height: 200px;
        width: 345px;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);
        margin: 0 auto;
        background: rgba(255, 255, 255, 1);
        border-radius: 5px;
        margin-bottom: 10px;

        .van-cell {
            height: 100%;

            .van-field__body {
                height: 100%;

                .van-field__input {
                    height: 100%;
                }
            }
        }
    }

    .bg {
        height: 125px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: url('../../../static/images/1.png') no-repeat;
        background-size: contain;

        .haohuai {
            width: 345px;
            height: 108px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);
            border-radius: 5px;

            ._van-radio-group {
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: 108px;
            }
        }
    }

    .maishu {
        width: 345px;
        min-height: 357px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);
        border-radius: 5px;
        margin: 10px auto;
        box-sizing: border-box;
        padding: 0 47px;

        .van-cell {
            align-items: center;
            padding: 0;
            height: 50px;
        }

        h3 {
            font-size: 12px;
            font-weight: 500;
            color: rgba(102, 102, 102, 1);
            padding: 20px 0 10px 0;
        }
    }

    .button {
        width: 345px;
        height: 45px;
        background: #1A84FB;
        border-radius: 5px;
        margin: 0 auto;
        font-size: 15px;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 45px;
    }
}
</style>
